import { watch, ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import { forEach } from 'lodash';

function formatMessageIds(messageIds, t, locale) {
  return Object.keys(messageIds).reduce((total, current) => {
    return {
      ...total,
      [current]: t(messageIds[current], locale),
    }
  }, {});
}

export function formatMessage(messageId) {
  const { locale, t } = useI18n();
  let message = ref(t(messageId, locale));
  watch(locale, () => {
    message.value = t(messageId, locale);
  })
  return message
}

export function formatMessages(messageIds) {
  const { locale, t } = useI18n();
  const messages = reactive(formatMessageIds(messageIds, t, locale));
  watch(locale, () => {
    forEach(messageIds, (value, key) => {
      messages[key] = t(value)
    })
  })
  return messages
}
